<template>
  <div id="loginBox">
    <div class="login-header" ref="header">
      <div class="login-huxing"></div>
    </div>
    <div class="login-body" ref="body">
      <div class="body-box1">
        <van-cell-group>
          <van-field
            v-model="formdata.name"
            right-icon="manager"
            placeholder="用户名"
            @update:model-value="nameChange"
          />
          <van-field
            v-model="formdata.pwd"
            type=password
            right-icon="lock"
            placeholder="密码"
            @update:model-value="pwdChange"
          />
        </van-cell-group>
        <div style="margin:50px 20px 30px;">
          <van-button :disabled="!formdata.canSub"   :loading="formdata.isajax" type="primary" block @click="submit">登录</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { ref , reactive    } from 'vue'
  import { Toast   } from 'vant'
  import router from '@/router'
  export default {
    name: 'Login',
    setup(){
      let header = ref(null),body = ref(null),formdata = reactive({
        name : '',
        pwd : '',
        canSub : false,
        isajax : false,
      });
      return {
        header,
        body,
        // ...toRefs(formdata)
        formdata
      }
    },
    data() {
      return {

      }
    },
    mounted() {
        let h = window.innerHeight
        this.header.style.height =( h / 3 )+ 'px'
        this.body.style.height =( h / 3 * 2 )+ 'px'
        window.Tls.login().then(()=>{
          router.push({path:'/list'})
        }).catch(()=>{
        })
    },
    methods: {
      nameChange() {
        this.checkValue()
      },
      pwdChange(){
        this.checkValue()
      },
      checkValue(){
        if( this.formdata.name != '' && this.formdata.pwd != '' ) {
           this.formdata.canSub = true
        }
        else {
          this.formdata.canSub =  false
        }
      },
      submit(){
        const it = this
        it.formdata.isajax = true
        window.Tls.login({
          data : it.formdata,
          autoLogin : true
        }).then(()=>{
          Toast.success('登录成功');
          setTimeout(function() {
            router.push('/list')
          }, 2000);
        }).catch(e=>{
          Toast.fail(e);
          it.formdata.isajax = false
        })
      }
    },
  }
</script>

<style scoped="">
  #loginBox{
    background-color: #f3f3f3;
  }
  .login-huxing{
    position: relative;
    top:100%;
    height: 20%;
    background: linear-gradient(90deg,#4787fe, #55c8f2);
    border-radius: 0 0 50% 50%/0 0 100% 100% ;
    
  }
  .login-header{
    position: relative;
    background: linear-gradient(90deg,#4787fe, #55c8f2);
  }
  .login-body{
    z-index: 2;
    position: relative;
  }
  .body-box1{
    position: absolute;
    width: 80%;
    top:0;
    left:10%;
    background-color: #fff;
    border-radius:5px;
    height: 100%;
    padding:20px;
    box-shadow: 1px 1px 5px  1px #ccc,-1px -1px 5px  1px #ccc;
    height:60%;
  }
</style>
